<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<div class="flexleft">
			<div :class="tabActive==index?'active margin_right3 pointer':'noActive margin_right3 pointer'"
				v-for="(item,index) in tabList" :key="index" @click="tabActive=index">
				{{item.name}}
			</div>
		</div>
		<!-- 列表 -->
		<div class="contentBox mainpadding margin_top" v-for="item in list.data">
			<div class="flexbetween">
				<div>
					<div class="flexleft">
						<div class="text_ft color_orange margin_right2" v-show="item.state==1">· 待审核</div>
						<div class="text_ft color_theme margin_right2" v-show="item.state==2">· 已通过</div>
						<div class="text_ft color_red margin_right2" v-show="item.state==3">· 已拒绝</div>
						<div class="text_ft color_three">{{item.mobile}}</div>
					</div>
					<div class="margin_top flexleft">
						<div class="text_d color_three margin_right3">上传时间：{{item.createtime_text}}</div>
						<div class="text_d color_three" v-if="item.state!=1">处理时间：{{item.checktime_text}}</div>
					</div>
				</div>
				<div class="tagBox textcenter">
					<div>学科：{{item.subject.name}}</div>
					<div class="margin_top1">班级：{{item.classname}}</div>
				</div>
			</div>
			<div class="refuseBox margin_top word_wrap"  v-if="item.state==3">
				拒绝理由：{{item.error_reason}}
			</div>
		</div>
		<div class="flexcenter margin_top" v-if="list.total > 15">
			<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
				@current-change="tuijianchange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		my_teacherList,
	} from "@/API/my_teacher"
	export default {
		data() {
			return {
				tabActive: 0,
				tabList: [{
					name: "待审核",
				}, {
					name: "已通过",
				}, {
					name: "已拒绝",
				}],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				type: "",
			}
		},
		watch:{
			tabActive(){
				this.tuijianchange(1)
			},
		},
		mounted() {
			this.init()
		},
		methods: {
			init(page) {
				my_teacherList({
					page: page || 1,
					state: this.tabActive+1
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.noActive {
		font-size: 15px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.active {
		font-size: 15px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
		position: relative;
	}

	.active::after {
		content: '';
		width: 22px;
		height: 2px;
		background: #3478F5;
		border-radius: 6px 6px 6px 6px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
	}

	.contentBox {
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #EAEAEA;
	}

	/* 标签 */
	.tagBox {
		padding: 5px 15px;
		background: rgba(52, 120, 245, .1);
		border-radius: 4px 4px 4px 4px;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	/* 拒绝 */
	.refuseBox {
		padding: 15px;
		background: rgba(255, 0, 0, .1);
		border-radius: 4px 4px 4px 4px;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}
</style>